<template>
    <div class='container'>
        <t-chat-content :content="ask" variant="base" role="user"></t-chat-content>
        <t-divider>Text</t-divider>
        <t-chat-content role="assistant" :content="doc" variant="base"> </t-chat-content>
        <t-divider>Markdown(角色必须是：assistant)</t-divider>
    </div>
</template>
<script setup lang='ts'>
import TDesign from 'tdesign-vue-next';
const ask = `import TDesign from 'tdesign-vue-next'; // 引入tdesign组件库
app.use(TDesign).use(router).mount('#app');

## This is a test code
`;

const doc = `# 1. This is TDesign
## 1.1. This is TDesign



### 1.1.1. This is TDesign


#### 1.1.1.1. This is TDesign


The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text.



> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet.

![](https://cbu01.alicdn.com/i2/381577383/O1CN01mDl7Sc24PSzElOzUx_!!381577383.jpg_400x400q10.jpg)

an example | *an example* | **an example**



1. Bird
1. McHale
1. Parish
    1. Bird
    1. McHale
        1. Parish


- Red
- Green
- Blue
    - Red
    - Green
        - Blue



This is [an example](http://example.com/ "Title") inline link.

<http://example.com/>



\\$\\$ 
\\frac{ax^2+bx+c}{2x^2+4x}
\$\$

| Anddas | da   | das  |
| ------ | ---- | ---- |
| d      | da   | d    |
| dd     | d    | das  |
| das    | d    | d    |


\`\`\`bash
\\begin{aligned}
(f,K^{'}_{x}y+K^{''}_{x}y)_{F}
&=(f^{'}+f^{''},K^{'}_{x}y+K^{''}_{x}y)_{F}\\
&=(f^{'},K^{'}_{x}y)_{F}+(f^{''},K^{''}_{x}y)_{F}\\
&=(f^{'}(x),y)_{Y}+(f^{''}(x),y)_{Y}\\
&=(f^{'}(x)+f^{''}(x),y)_{Y}\\
&=(f(x),y)_{Y}\\
&=(f,K_{x}y)_{F}
\\end{aligned}
\`\`\`


\`\`\`bash
$ npm i tdesign-vue-next
\`\`\`

---

\`\`\`javascript
import { createApp } from 'vue';
import App from './app.vue';

const app = createApp(App);
app.use(TDesignChat);
\`\`\`
`;
</script>
<style lang='scss' scoped></style>